Pure.CSS এর Tables এবং Data Tables আপনাকে ওয়েব পেজে সুন্দরভাবে টেবিল তৈরি করতে সহায়তা করে। Pure.CSS এর টেবিল স্টাইলিং খুবই সহজ এবং মিনিমালিস্ট, যা আপনাকে দ্রুত এবং সিম্পল টেবিল ডিজাইন করতে সক্ষম করে। নিচে Pure.CSS এর টেবিল এবং ডেটা টেবিল সম্পর্কে বিস্তারিত আলোচনা করা হলো।
1. Basic Tables in Pure.CSS
Pure.CSS দ্বারা সাধারণ টেবিল স্টাইলিং করতে খুবই সহজ। আপনি টেবিল, রো (row), কলাম (column), হেডার (header), এবং সেল (cell) এর জন্য ডিফল্ট স্টাইল পাবেন। নিচে একটি সাধারণ টেবিলের উদাহরণ দেওয়া হলো:
Basic Table Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<title>Pure.CSS Table Example</title>
</head>
<body>
<table class="pure-table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>28</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>34</td>
<td>London</td>
</tr>
<tr>
<td>Sam Johnson</td>
<td>22</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table>
</body>
</html>
ব্যাখ্যা:
.pure-table: এই ক্লাসটি সাধারণ টেবিলের জন্য ব্যবহৃত হয়।<thead>: টেবিল হেডার (heading) অংশ।<tbody>: টেবিল বডি অংশ যেখানে ডেটা সেল (data cell) থাকে।
এটি একটি সাধারণ টেবিল, যেখানে কলামগুলি টেবিল হেডারে এবং ডেটা সেলগুলি বডিতে রয়েছে।
2. Striped Tables
Striped Tables-এ একরঙা এবং অন্যরঙা সারি থাকে, যাতে টেবিলের ডেটা আরও স্পষ্টভাবে দেখানো যায়। Pure.CSS-এ আপনি খুব সহজেই স্ট্রাইপড টেবিল তৈরি করতে পারেন।
Striped Table Example:
<table class="pure-table pure-table-striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>28</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>34</td>
<td>London</td>
</tr>
<tr>
<td>Sam Johnson</td>
<td>22</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table>
ব্যাখ্যা:
.pure-table-striped: এই ক্লাসটি টেবিলের সারে সারে আলাদা রং দেয়, যা "striped" টেবিলের প্রভাব তৈরি করে।
3. Bordered Tables
Bordered Tables-এ টেবিলের চারপাশে এবং প্রতিটি সেলের চারপাশে সীমানা (border) থাকবে, যা টেবিলের প্রতিটি উপাদানকে আলাদা করে দেখাবে।
Bordered Table Example:
<table class="pure-table pure-table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>28</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>34</td>
<td>London</td>
</tr>
<tr>
<td>Sam Johnson</td>
<td>22</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table>
ব্যাখ্যা:
.pure-table-bordered: এই ক্লাসটি টেবিলের এবং প্রতিটি সেলের চারপাশে বর্ডার প্রদান করে।
4. Data Tables (Paginated Tables)
Pure.CSS তে Data Tables তৈরির জন্য আপনি সাধারণভাবে ডেটা টেবিল তৈরি করতে পারেন, তবে পেজিনেশন (pagination) বা সোর্টিং ফিচারগুলির জন্য আপনাকে JavaScript বা কোনো থার্ড-পার্টি লাইব্রেরি ব্যবহার করতে হবে, কারণ Pure.CSS নিজে থেকে ডাইনামিক ফিচার প্রদান করে না।
Data Table (with Pagination) Example:
এখানে আমরা সিম্পল ডেটা টেবিল তৈরি করব, যেখানে ডেটা সেল থাকবে এবং পেজিনেশন (pagination) ফিচার থাকবে (যে ফিচারটি আপনি JavaScript দিয়ে যোগ করতে পারবেন):
<table class="pure-table pure-table-bordered pure-table-striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>28</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>34</td>
<td>London</td>
</tr>
<tr>
<td>Sam Johnson</td>
<td>22</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Chris Williams</td>
<td>40</td>
<td>San Francisco</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
<div class="pure-g">
<div class="pure-u-1-2">
<button class="pure-button">Previous</button>
</div>
<div class="pure-u-1-2" style="text-align: right;">
<button class="pure-button">Next</button>
</div>
</div>
ব্যাখ্যা:
- এখানে pagination পেজের নিচে Previous এবং Next বাটন দ্বারা প্রস্তাব করা হয়েছে, যা আপনাকে সিম্পল ডেটা টেবিলের পেজিনেশন ফিচার তৈরি করতে সহায়তা করবে।
- JavaScript ব্যবহার করে ডেটা টেবিল পেজিনেশন বাস্তবায়ন করতে পারেন, যেটি Pure.CSS-এর অংশ নয়।
5. Hoverable Tables
Hoverable Tables টেবিলের সারিগুলির উপর মাউস রাখলে একটি বিশেষ স্টাইল দেখায়, যা ব্যবহারকারীর জন্য আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করে তোলে।
Hoverable Table Example:
<table class="pure-table pure-table-bordered pure-table-striped pure-table-hoverable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>28</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>34</td>
<td>London</td>
</tr>
<tr>
<td>Sam Johnson</td>
<td>22</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table>
ব্যাখ্যা:
.pure-table-hoverable: এই ক্লাসটি টেবিলের সারি (rows) হোভার করলে একটি পরিবর্তন দেখাবে, যেমন রঙ পরিবর্তন বা বর্ডার পরিবর্তন হতে পারে।
Pure.CSS-এর টেবিল এবং ডেটা টেবিল স্টাইলিং খুবই সহজ এবং মিনিমালিস্ট। এর মধ্যে রয়েছে স্ট্রাইপড টেবিল, বর্ডারড টেবিল, হোভারেবল টেবিল, এবং সাধারণ ডেটা টেবিল তৈরি করার জন্য প্রয়োজনীয় ক্লাসগুলো। আপনি সেগুলিকে আপনার ওয়েব পেজে খুব সহজে ব্যবহার করতে পারেন এবং সুন্দরভাবে টেবিল ডিজাইন করতে পারবেন। যদিও Pure.CSS নিজে থেকে ডাইনামিক ফিচার (যেমন পেজিনেশন) প্রদান করে না, তবে আপনি JavaScript অথবা অন্যান্য লাইব্রেরি ব্যবহার করে এই ফিচারগুলো যোগ করতে পারেন।
Pure.CSS ফ্রেমওয়ার্কে table তৈরি এবং styling করা খুবই সহজ। Pure.CSS-এর pure-table ক্লাসের মাধ্যমে আপনি সহজে এবং দ্রুত সিম্পল, সুন্দর এবং রেসপন্সিভ টেবিল তৈরি করতে পারবেন। এটি টেবিলের জন্য এক্সট্রা স্টাইল যোগ করে, যেমন বর্ডার, প্যাডিং, আলাদা রো এবং কলাম হাইলাইটিং, যা টেবিলকে দেখতে আরও প্রফেশনাল এবং ব্যবহারকারী-বান্ধব করে তোলে।
Pure.CSS এ Table তৈরি এবং Styling করা
1. Simple Table
এটি একটি সাধারণ টেবিল তৈরি করার উদাহরণ:
<table class="pure-table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>
এখানে pure-table ক্লাস ব্যবহার করা হয়েছে, যা টেবিলটির জন্য বেসিক স্টাইলিং প্রয়োগ করবে। এই টেবিলটি রেসপন্সিভ হবে এবং সহজে দেখতে সুন্দর হবে।
2. Table with Striped Rows
আপনি চাইলে টেবিলের রো স্ট্রাইপ করতে পারেন, যাতে প্রতিটি সেপারেট রো আলাদা রঙে দেখায়। Pure.CSS এ এটি pure-table-striped ক্লাস দিয়ে করা যায়:
<table class="pure-table pure-table-striped">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<tr>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
</tr>
</tbody>
</table>
pure-table-striped ক্লাসটি টেবিলের রো-কে স্ট্রাইপেড (alternating colors) করে, যাতে ব্যবহারকারী সহজে রো পার্থক্য বুঝতে পারে।
3. Table with Bordered Rows
আপনি যদি টেবিলের রো এবং কলামগুলোকে বর্ডার করতে চান, তাহলে pure-table-bordered ক্লাস ব্যবহার করতে পারেন:
<table class="pure-table pure-table-bordered">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>
এখানে pure-table-bordered ক্লাস বর্ডার দেয় এবং টেবিলটির চারপাশ এবং ভিতরের রো/কলামগুলির মধ্যে সীমানা তৈরি করে।
4. Table with Hover Effect
আপনি টেবিলের রো-তে হোভার ইফেক্ট যোগ করতে পারেন, যাতে যখন ব্যবহারকারী রো-তে মাউস হোভার করেন, তখন সেই রো হাইলাইট হয়। এটি pure-table-hover ক্লাস দিয়ে করা যায়:
<table class="pure-table pure-table-bordered pure-table-hover">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>
pure-table-hover ক্লাসটি হোভার করলে রো-এর ব্যাকগ্রাউন্ড পরিবর্তন করবে, যা টেবিলকে আরও ইন্টারঅ্যাকটিভ করে তোলে।
5. Table with Compact Styling
pure-table-compact ক্লাস দিয়ে আপনি টেবিলটি কমপ্যাক্ট (ছোট) করতে পারেন। এটি টেবিলের ভেতরের প্যাডিং কমিয়ে টেবিলের আকার ছোট করে।
<table class="pure-table pure-table-compact">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>
এটি টেবিলের আকার ছোট করে, যাতে আপনার ওয়েবসাইটে বেশি জায়গা বাঁচে এবং টেবিলটি আরও কমপ্যাক্ট দেখতে লাগে।
6. Responsive Table
Pure.CSS স্বয়ংক্রিয়ভাবে রেসপন্সিভ টেবিল সাপোর্ট করে। তবে, আপনি যদি আরও উন্নত রেসপন্সিভ টেবিল চান, তাহলে pure-table-responsive ক্লাস ব্যবহার করতে পারেন।
<div class="pure-table-responsive">
<table class="pure-table pure-table-bordered">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>
</div>
এখানে, pure-table-responsive ক্লাস টেবিলটিকে ছোট স্ক্রীনে স্ক্রোলেবল করে তোলে।
সারাংশ
Pure.CSS দিয়ে টেবিল তৈরি এবং স্টাইলিং করা খুবই সহজ এবং দ্রুত। আপনি pure-table, pure-table-striped, pure-table-bordered, pure-table-hover, এবং pure-table-compact ক্লাস ব্যবহার করে টেবিলের বিভিন্ন ডিজাইন এবং স্টাইলিং প্রভাব তৈরি করতে পারেন। এর ফলে আপনি খুব সহজেই সুন্দর এবং রেসপন্সিভ টেবিল তৈরি করতে পারবেন যা আপনার ওয়েবসাইটে প্রফেশনাল লুক যোগ করবে। Pure.CSS এর সহজ ব্যবহার এবং ছোট সাইজের কারণে এটি ওয়েব ডেভেলপমেন্টে খুবই জনপ্রিয় একটি সিএসএস লাইব্রেরি।
Pure.CSS ব্যবহার করে Table তৈরি এবং স্টাইলিং করা খুবই সহজ। Pure.CSS সাধারণত minimalistic এবং lightweight ফ্রেমওয়ার্ক হিসেবে কাজ করে, তাই এটি টেবিলের জন্য কিছু ডিফল্ট স্টাইল ক্লাস সরবরাহ করে, যা টেবিলকে সুন্দর এবং রেসপন্সিভ তৈরি করতে সাহায্য করে।
এখানে Striped Tables এবং Bordered Tables তৈরি করার জন্য Pure.CSS এর সাহায্যে কিভাবে টেবিল তৈরি এবং স্টাইল করতে হয় তা বিস্তারিতভাবে আলোচনা করা হলো।
1. Basic Table in Pure.CSS
Pure.CSS ব্যবহার করে একটি সাধারণ টেবিল তৈরি করা খুবই সহজ। শুধুমাত্র pure-table ক্লাসটি ব্যবহার করলেই টেবিলটি সুন্দরভাবে স্টাইল হয়ে যাবে।
<table class="pure-table">
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</tbody>
</table>
এটি একটি সাধারণ টেবিল তৈরি করবে যা Pure.CSS এর বেসিক স্টাইল ব্যবহার করে।
2. Striped Table in Pure.CSS
Striped Table এমন একটি টেবিল যেখানে টেবিলের প্রতি দ্বিতীয় সারি হালকা এবং গা dark ় রঙের স্টাইল থাকে, যা টেবিলটি দেখতে আরও স্পষ্ট এবং সহজে পড়ার উপযোগী হয়।
Pure.CSS-এ striped tables তৈরির জন্য pure-table-bordered ক্লাসের পাশাপাশি pure-table-striped ক্লাস ব্যবহার করা হয়।
<table class="pure-table pure-table-striped">
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
</tbody>
</table>
ব্যাখ্যা:
pure-table-stripedক্লাসটি অ্যাপ্লাই করলে টেবিলের প্রতি দ্বিতীয় সারির জন্য হালকা রঙ ব্যবহার হয়, যা টেবিলের মধ্যে স্ট্রাইপিং (alternating row colors) তৈরি করে।
উল্লেখযোগ্য বৈশিষ্ট্য:
- Striped effect: প্রতি দ্বিতীয় সারি আলাদা রঙে শেড হবে।
- Readability: এটি টেবিলের পড়া সহজ করে তোলে, বিশেষ করে বড় টেবিলগুলির জন্য।
3. Bordered Table in Pure.CSS
Bordered Table এমন একটি টেবিল যেখানে টেবিলের কলাম এবং সারির চারপাশে সীমানা (border) থাকে। Pure.CSS এ bordered tables তৈরি করতে pure-table-bordered ক্লাস ব্যবহার করা হয়।
<table class="pure-table pure-table-bordered">
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
</tbody>
</table>
ব্যাখ্যা:
pure-table-borderedক্লাস ব্যবহার করলে টেবিলের সব সেল (cell) এবং টেবিলের চারপাশে সীমানা (borders) যোগ হয়।- এই ক্লাসটি টেবিলকে আরও স্পষ্ট এবং প্রফেশনাল লুক দেয়।
উল্লেখযোগ্য বৈশিষ্ট্য:
- Borders around each cell: প্রতিটি সেলে সীমানা দেওয়া হয়।
- Clarity: টেবিলের তথ্য পরিষ্কারভাবে আলাদা হয়ে যায়।
4. Combined Striped and Bordered Table
আপনি Striped এবং Bordered উভয় ক্লাস একসাথে ব্যবহার করে একটি টেবিল তৈরি করতে পারেন, যা সীমানা এবং স্ট্রাইপিং উভয়ই প্রদান করবে। এর জন্য pure-table-bordered এবং pure-table-striped ক্লাস একসাথে ব্যবহার করা হয়।
<table class="pure-table pure-table-bordered pure-table-striped">
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
</tbody>
</table>
ব্যাখ্যা:
pure-table-bordered: সীমানা যুক্ত করবে প্রতিটি সেলে।pure-table-striped: টেবিলের প্রতি দ্বিতীয় সারির জন্য স্ট্রাইপিং অ্যাপ্লাই করবে।
5. Responsive Tables in Pure.CSS
Pure.CSS-এ আপনি সহজেই responsive tables তৈরি করতে পারেন যাতে টেবিলটি ছোট স্ক্রীন (মোবাইল ডিভাইসে) ব্যবহারের জন্য উপযুক্ত হয়। আপনি pure-table-responsive ক্লাস ব্যবহার করতে পারেন।
<div class="pure-table-responsive">
<table class="pure-table pure-table-bordered pure-table-striped">
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</tbody>
</table>
</div>
ব্যাখ্যা:
pure-table-responsive: টেবিলটি রেসপন্সিভ করে, অর্থাৎ স্ক্রীনের সাইজ ছোট হলে টেবিলটি স্ক্রল হতে শুরু করবে।
Pure.CSS ব্যবহার করে Striped Tables এবং Bordered Tables খুব সহজেই তৈরি করা যায়। আপনি চাইলে একটি সাধারণ টেবিল, স্ট্রাইপিং সহ টেবিল, অথবা সীমানাসহ টেবিল তৈরি করতে পারেন। এছাড়াও, responsive tables তৈরি করে, আপনি আপনার টেবিলের ব্যবহারযোগ্যতা বাড়াতে পারেন। Pure.CSS এর এই স্টাইল ক্লাসগুলো ওয়েব ডেভেলপমেন্টে টেবিলের উপস্থাপন এবং ইউজার এক্সপেরিয়েন্স উন্নত করতে সাহায্য করে।
Pure.CSS: Responsive Tables তৈরি করা
Pure.CSS-এ Responsive Tables তৈরি করা খুবই সহজ এবং কার্যকরী। ওয়েব ডেভেলপমেন্টে টেবিল একটি সাধারণ উপাদান, কিন্তু অনেক সময় টেবিলের কন্টেন্ট ছোট স্ক্রীনে যেমন মোবাইল বা ট্যাবলেটে সঠিকভাবে দেখানো কঠিন হয়। Pure.CSS এর সাহায্যে, আপনি সহজেই রেস্পন্সিভ টেবিল তৈরি করতে পারবেন যা সমস্ত স্ক্রীনে সঠিকভাবে প্রদর্শিত হবে।
Responsive Tables তৈরি করার জন্য Pure.CSS এর পদ্ধতি
Pure.CSS টেবিলগুলোর জন্য একটি সহজ ও কার্যকরী স্টাইল প্রদান করে, কিন্তু যদি আপনি চাইলে টেবিলগুলো রেস্পন্সিভ করার জন্য আরও কিছু কাস্টম স্টাইল যোগ করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো যেখানে একটি টেবিল তৈরি করা হয়েছে এবং এটি মোবাইল ডিভাইসে রেস্পন্সিভভাবে কাজ করবে।
Pure.CSS এর মাধ্যমে একটি সাধারণ টেবিল তৈরি করা
১. সাধারণ টেবিল উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure CSS Responsive Table</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
</head>
<body>
<h1>Sample Table</h1>
<table class="pure-table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Mary</td>
<td>22</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
</body>
</html>
এখানে Pure.CSS এর pure-table ক্লাস ব্যবহার করা হয়েছে, যা টেবিলের জন্য সাধারণ স্টাইল প্রয়োগ করবে। এই টেবিলটি ডেস্কটপে সঠিকভাবে দেখাবে, কিন্তু মোবাইলে ছোট হয়ে যাবে এবং ব্যবহারকারীর পক্ষে পড়া কঠিন হতে পারে।
২. Responsive Table তৈরি করা
টেবিলকে রেস্পন্সিভ বানাতে, আপনাকে overflow এর সাহায্যে টেবিলটি স্ক্রলেবল করতে হবে, যাতে মোবাইল বা ছোট স্ক্রীনে এটি ঠিকভাবে দেখা যায়। Pure.CSS-এর জন্য একটি সাধারণ কৌশল হল টেবিলকে একটি কনটেইনারের মধ্যে রেখে, কনটেইনারটিকে overflow-x: auto দিয়ে স্ক্রলযোগ্য করা।
৩. Responsive Table Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Table</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
/* Ensure table scrolls horizontally on small screens */
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* Enable smooth scrolling on iOS */
}
</style>
</head>
<body>
<h1>Responsive Table</h1>
<div class="table-container">
<table class="pure-table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Mary</td>
<td>22</td>
<td>Chicago</td>
</tr>
<tr>
<td>James</td>
<td>35</td>
<td>San Francisco</td>
</tr>
<tr>
<td>Alice</td>
<td>28</td>
<td>Boston</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
ব্যাখ্যা:
.table-container: একটি কনটেইনার তৈরি করা হয়েছে, যা overflow-x: auto সেট করা হয়েছে। এটি ছোট স্ক্রীনে টেবিলকে স্ক্রলযোগ্য করে তোলে।-webkit-overflow-scrolling: touch;: iOS ডিভাইসে স্ন্যাপি স্ক্রলিং সক্ষম করতে এই স্টাইলটি যোগ করা হয়েছে।
৪. Advanced Responsive Table with Stacked Columns
অনেক সময়, আপনি চাইবেন যে মোবাইল স্ক্রীনে টেবিলের প্রতিটি রোকে একটি "stacked" লেআউট আকারে প্রদর্শন করতে। অর্থাৎ, টেবিলের প্রতিটি কলাম মোবাইল ডিভাইসে একটি একক কলামে দেখতে হবে। এটি ব্যবহারকারীদের জন্য আরও পাঠযোগ্য এবং নেভিগেটযোগ্য হবে।
এটি করার জন্য, আপনি CSS মিডিয়া কুয়েরি ব্যবহার করতে পারেন, যেখানে আপনি টেবিলের রোকে কাস্টমাইজ করে আড়াআড়ি (horizontal) থেকে লম্বালম্বি (vertical) ডিসপ্লেতে পরিবর্তন করবেন।
৫. Stacked Columns Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Stacked Table</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
/* Stacked table for small screens */
@media (max-width: 600px) {
.pure-table th, .pure-table td {
display: block;
width: 100%;
}
.pure-table th {
background-color: #f2f2f2;
font-weight: bold;
padding: 8px;
}
.pure-table td {
padding: 8px;
border-top: 1px solid #ccc;
}
}
</style>
</head>
<body>
<h1>Responsive Stacked Table</h1>
<table class="pure-table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Mary</td>
<td>22</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
</body>
</html>
ব্যাখ্যা:
@media (max-width: 600px): ছোট স্ক্রীনের জন্য একটি মিডিয়া কুয়েরি ব্যবহার করা হয়েছে। যখন স্ক্রীনের প্রস্থ 600px এর কম হবে, তখন টেবিলের প্রতিটি সারি একে একে "stacked" অবস্থায় পরিবর্তিত হবে।display: block;: এই স্টাইলটি টেবিলেরthএবংtdউপাদানগুলোকে ব্লক এলিমেন্ট হিসেবে প্রদর্শন করে, যা একেকটি সারি ধরে সেগুলোর মধ্যে আলাদা আলাদা লাইন তৈরি করে।
Pure.CSS ব্যবহার করে Responsive Tables তৈরি করা খুবই সহজ এবং কার্যকরী। এর মধ্যে আপনাকে শুধু কিছু সহজ CSS স্টাইল এবং মিডিয়া কুয়েরি ব্যবহার করতে হয়।
- Overflow সিস্টেমের মাধ্যমে টেবিল স্ক্রলেবল করা যায়, যা ছোট স্ক্রীনে সহজে দেখানো সম্ভব হয়।
- Stacked table তৈরি করার মাধ্যমে মোবাইল ব্যবহারকারীদের জন্য একটি আরও সুবিধাজনক টেবিল লেআউট তৈরি করা যায়।
Pure.CSS এর গ্রিড সিস্টেম এবং অন্যান্য উপাদানগুলির সাহায্যে আপনি সহজেই রেস্পন্সিভ ওয়েব ডিজাইন তৈরি করতে পারবেন যা বিভিন্ন ডিভাইসের জন্য উপযুক্ত হবে।
Pure.CSS এ Data Tables এবং Pagination তৈরি করা খুবই সহজ এবং কার্যকরী। Pure.CSS আপনাকে একটি সিম্পল এবং দ্রুত ডেভেলপমেন্ট অভিজ্ঞতা প্রদান করে, যা সঠিকভাবে টেবিল ডেটা প্রদর্শন এবং পেজিনেশন সিস্টেম তৈরি করতে সাহায্য করে।
Pure.CSS-এ Data Tables তৈরি করা
Pure.CSS এর মধ্যে একটি Data Table তৈরি করতে, আপনি সিম্পল pure-table ক্লাস ব্যবহার করতে পারেন। এটি একটি স্টাইল করা টেবিল তৈরি করে, যা সব ব্রাউজারে সঠিকভাবে প্রদর্শিত হয়।
উদাহরণ: Basic Data Table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Data Table</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.table-container {
margin: 20px;
}
</style>
</head>
<body>
<div class="table-container">
<table class="pure-table pure-table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>29</td>
<td>New York</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>34</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>3</td>
<td>Michael Johnson</td>
<td>45</td>
<td>Chicago</td>
</tr>
<tr>
<td>4</td>
<td>Emily Davis</td>
<td>25</td>
<td>San Francisco</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
ব্যাখ্যা:
- pure-table: এটি Pure.CSS এর ক্লাস, যা একটি সাধারণ টেবিল তৈরি করে।
- pure-table-bordered: এই ক্লাসটি টেবিলের চারপাশে বর্ডার যোগ করে।
- thead, tbody, th, এবং td: সাধারণ HTML টেবিল ট্যাগ, যেগুলি ডেটার শিরোনাম এবং ডেটা সেল তৈরি করে।
এটি একটি সিম্পল Data Table তৈরি করবে, যেখানে টেবিলের চারপাশে বর্ডার থাকবে এবং তথ্যটি সুন্দরভাবে প্রদর্শিত হবে।
Pure.CSS এ Pagination তৈরি করা
Pagination হল একটি টুল যা আপনাকে বড় ডেটা সেট বা দীর্ঘ তালিকাগুলিকে ছোট ছোট অংশে ভাগ করে দেখাতে সাহায্য করে। Pure.CSS এ পেজিনেশন তৈরি করার জন্য আপনি pure-pagination ক্লাস ব্যবহার করতে পারেন।
উদাহরণ: Pagination তৈরি করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Pagination</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.pagination-container {
margin: 20px;
}
</style>
</head>
<body>
<div class="pagination-container">
<ul class="pure-pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</body>
</html>
ব্যাখ্যা:
- pure-pagination: Pure.CSS এর ক্লাস, যা সিম্পল পেজিনেশন তৈরি করতে ব্যবহৃত হয়।
- « এবং »: এগুলি HTML এর প্রিপটিক পেজিনেশন সাইডার (এলিফ,
<<এবং>>) হিসেবে কাজ করে। - li > a: প্রতিটি পেজের জন্য একটি link (এনকারি) তৈরি হয়, যেখানে আপনি পেজ নম্বর বা পূর্ববর্তী/পরবর্তী পেজে যেতে পারবেন।
Pure.CSS এর সাথে Pagination এবং Data Table একত্রিত করা:
এখন, আমরা Data Table এবং Pagination একত্রিত করতে পারি, যাতে আপনি একটি বড় ডেটা সেট পেজিনেশন ব্যবহার করে দেখতে পারবেন।
উদাহরণ: Data Table + Pagination
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Data Table with Pagination</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.table-container {
margin: 20px;
}
.pagination-container {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="table-container">
<table class="pure-table pure-table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>29</td>
<td>New York</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>34</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>3</td>
<td>Michael Johnson</td>
<td>45</td>
<td>Chicago</td>
</tr>
<tr>
<td>4</td>
<td>Emily Davis</td>
<td>25</td>
<td>San Francisco</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
</div>
<div class="pagination-container">
<ul class="pure-pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</body>
</html>
ব্যাখ্যা:
- Data Table: টেবিলটি ডেটা সেল এবং হেডার সহ তৈরি করা হয়েছে।
- Pagination: টেবিলের নিচে পেজিনেশন সিস্টেম যোগ করা হয়েছে, যেখানে আপনি পেজ ১ থেকে ৬ পর্যন্ত যেতে পারবেন।
- pure-pagination: এটি পেজিনেশন সিস্টেমের জন্য ব্যবহৃত ক্লাস।
Pure.CSS এর মাধ্যমে Data Tables এবং Pagination তৈরি করা সহজ এবং কার্যকরী। এর গ্রিড এবং বেসিক টেবিল স্টাইলিং ক্লাস ব্যবহার করে আপনি দ্রুত সুন্দর এবং রেসপন্সিভ ডেটা টেবিল এবং পেজিনেশন সিস্টেম তৈরি করতে পারবেন। Pure.CSS খুবই হালকা এবং দ্রুত, ফলে এটি ওয়েব পেজের লোডিং স্পিডে কোনও প্রভাব ফেলে না এবং সহজে কাস্টমাইজ করা যায়।
Read more
